<!-- 模态窗 -->
<template>
    <div class="">
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px" v-if="dialogVisible">
                <el-form-item label="介绍信：" prop="IntroductionLetter.name">
                    <div class="upload">
                        <el-input v-model="form.IntroductionLetter.name" disabled></el-input>
                        <input
                            type="file"
                            style="display: none"
                            ref="IntroductionLetter"
                            @change="(checked) => handleClick(checked, 'IntroductionLetter')"
                        />
                        <i class="el-icon-folder cursor" @click="getFile('IntroductionLetter')"></i>
                        <span class="file_state"> <i class="el-icon-circle-check" :class="IntroductionLetterState"></i></span>
                    </div>
                </el-form-item>
                <el-form-item label="任务书：" prop="Assignment.name">
                    <div class="upload">
                        <el-input v-model="form.Assignment.name" disabled></el-input>
                        <input type="file" style="display: none" ref="Assignment" @change="(checked) => handleClick(checked, 'Assignment')" />
                        <i class="el-icon-folder cursor" @click="getFile('Assignment')"></i>
                        <span class="file_state"> <i class="el-icon-circle-check" :class="AssignmentState"></i></span>
                    </div>
                </el-form-item>
                <el-form-item label="涉密证书编号：" prop="CertificateNo">
                    <el-input v-model="form.CertificateNo" placeholder="请输入涉密证书编号"></el-input>
                </el-form-item>
                <el-form-item label="资料使用范围：" prop="DataUseArea">
                    <el-input v-model="form.DataUseArea" placeholder="请输入资料使用范围"></el-input>
                </el-form-item>
                <el-form-item label="资料用途：" prop="DataPurpose">
                    <el-input
                        v-model="form.DataPurpose"
                        placeholder="请输入项目名称，100字以内"
                        type="textarea"
                        maxlength="100"
                        show-word-limit
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click="handleClose()">取 消</el-button>
                    <el-button type="primary" @click="openPromise">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
function filetype(rule, value, callback) {
    if (value.name.split(".")[1] != "docx") {
        callback(new Error("请选择.docx文件"))
    } else {
        callback()
    }
}
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            form: {
                IntroductionLetter: {
                    name: "",
                },
                Assignment: {
                    name: "",
                },
            },
            rules: {
                "IntroductionLetter.name": [
                    { required: true, message: "请选择介绍信", trigger: "blur" },
                    // { validator: filetype, trigger: "blur" }
                ],
                "Assignment.name": [{ required: true, message: "请选择任务书", trigger: "blur" }],
                CertificateNo: [{ required: true, message: "请输入法案证书编号", trigger: "blur" }],
                DataUseArea: [{ required: true, message: "请输入资料使用范围", trigger: "blur" }],
                DataPurpose: [{ required: true, message: "请输入资料用途", trigger: "blur" }],
                // dataInfo: [{ required: true, message: "请输入借阅资料信息明细", trigger: "blur" }],
            },
            AssignmentState: "",
            IntroductionLetterState: "",
        }
    },
    props: {
        dataInfo: Array,
    },
    components: {},

    computed: {},

    mounted() {},

    methods: {
        handleClose() {
            this.dialogVisible = !this.dialogVisible
            if (!this.dialogVisible) {
                this.form = {
                    IntroductionLetter: {
                        name: "",
                    },
                    Assignment: {
                        name: "",
                    },
                }
            }
        },
        onSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    const formData = new FormData()

                    formData.append("DataInfo", JSON.stringify(this.dataInfo))
                    formData.append("IntroductionLetter", this.form.IntroductionLetter)
                    formData.append("Assignment", this.form.Assignment)
                    formData.append("CertificateNo", this.form.CertificateNo)
                    formData.append("DataUseArea", this.form.DataUseArea)
                    formData.append("DataPurpose", this.form.DataPurpose)

                    const { code, msg } = await this.$store.dispatch("borrowForm/addBorrowingForm", formData)

                    if (code === 200) {
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            message: "申请提交成功！<br/>3日内收到审核回复，请关注审核信息！",
                            type: "success",
                            center: true,
                            customClass: "zmessage",
                        })
                        this.$router.push("/BorrowForm")
                        this.handleClose()
                    }
                } else {
                    return false
                }
            })
        },
        //打开选择文件框
        getFile(prop) {
            this.$refs[prop].click()
            this.$refs[prop].value = ""
        },
        //获取 选择的文件
        handleClick(e, prop) {
            const files = e.target.files[0]
            const fileType = ["docx", "pdf", "png", "PNG", "JPG", "jpg", "jpeg", "JPEG"]

            if (fileType.indexOf(files.name.split(".")[1]) != -1) {
                this.$set(this.form, prop, files)
                this[prop + "State"] = "success_state"
            } else {
                this.$message.error("请选择docx、pdf、png、jpg文件")
            }
        },

        openPromise(e, prop) {
            const h = this.$createElement
            this.$msgbox({
                title: "提示",
                message: h("p", null, [h("span", { style: "color: red" }, "请确认您的材料已全部上传且真实有效。")]),
                showCancelButton: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                beforeClose: (action, instance, done) => {
                    if (action === "confirm") {
                        this.onSubmit()
                        done()
                    } else {
                        done()
                    }
                },
            })
                .then((action) => {})
                .catch(() => {})
        },
    },
}
</script>
<style lang='scss' scoped>
.upload {
    display: flex;
    justify-items: center;

    i {
        font-size: 0.5rem;
        padding: 0 10px;
    }
}
.file_state {
    display: inline-block;
    width: 60px;
    i {
        font-size: 18px;
    }
}
.success_state {
    color: #67c23a;
}
// ::v-deep .el-message__content {
//     font-size: 22px !important;
//     padding-bottom: 10px;
// }
// .zmessage {
// }
</style>